<template>
    <el-dialog v-model="drawer" :append-to-body="true" width="660px" title="表头设置" @close="close">
        <el-table :data="tableList.header" size="small"  border ref="headerTable">
            <el-table-column type="selection" width="30" fixed="left"></el-table-column>
            <el-table-column prop="name" label="表头名">
                <template #default="scope">
                    <span style="width:130px;display:inline-block;font-size:12px;">{{scope.row.name}}</span>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-row justify="center">
                <el-button type="primary" :loading="submitLoading" size="small" @click="submit">保存</el-button>
                <el-button size="small" @click="cancel">取消</el-button>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import { toRefs, ref, computed, reactive, nextTick, onUpdated } from 'vue'
export default {
    name: 'ActiveHeader',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultHeader: {
            type: Array,
            default() {
                return []
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer', 'update:defaultForm'],
    setup(props, context){
        const { dialogDrawer, defaultHeader } = toRefs(props)
        const headerTable = ref()
        let drawer = computed({
            get: () => dialogDrawer.value,
            set: (val) => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let tableList = computed({
            get(){
                let arr = []
                for(let i = 0; i < defaultHeader.value.length; i ++) {
                    arr.push(defaultHeader.value[i])
                }
                return {
                    header: arr
                }
            },
            set(val) {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            submitLoading: false
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 提交
        const submit = () => {
            let list = headerTable.value.getSelectionRows()
            context.emit('onSubmit', list)
            context.emit('update:dialogDrawer', false)
        }
        // 取消
        const cancel = () => {
            context.emit('update:dialogDrawer', false)
        }
        onUpdated(() => {
            if(!headerTable.value) return
            headerTable.value.clearSelection()
            const rows = tableList.value.header
            nextTick(() => {
                rows.forEach((row) => {
                    headerTable.value.toggleRowSelection(row, true)
                })
            })
        })
        return {
            ...toRefs(state),
            headerTable,
            drawer,
            tableList,
            close,
            submit,
            cancel
        }
    }
}
</script>

<style>

</style>